<template>
	<view class="full bg-white">
		<action-bar backTitle="返回" title="数据排行"></action-bar>
		<view>
			<view>
				<view>
					<view class="text-lg padding-lr-xl margin-tb-sm">收入占比</view>
					<qiun-data-charts type="pie" :chartData="rankData.income" background="none"/>
				</view>
				<view>
					<view class="text-lg padding-lr-xl margin-tb-sm">支出占比</view>
					  <qiun-data-charts type="pie" :chartData="rankData.outcome" background="none"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookId: null,
				rankData: {
					income: {
						series: [{
							data: []
						}]
					},
					outcome: {
						series: [{
							data: []
						}]
					}
				}
			}
		},
		onLoad(option) {
			this.bookId = option.bookId
			this.queryRanksByBookId()
		},
		methods: {
			queryRanksByBookId() {
				this.$request({
					url: `/record/${this.bookId}/rank/summary`
				}).then(res => {
					if (res && res.data.code) {
						let income = res.data.list.income
						let outcome = res.data.list.outcome
						
						let incomeData = []
						let outcomeData = []
						
						console.log(outcome)
						for (let item of Object.keys(income)) {
							incomeData.push({
								name: item,
								value: income[item]
							})
						}
						
						for (let item of Object.keys(outcome)) {
							outcomeData.push({
								name: item,
								value: outcome[item]
							})
						}
						
						this.rankData = {
							income: {
								series: [{
									data: incomeData
								}]
							},
							outcome: {
								series: [{
									data: outcomeData
								}]
							}
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
